<template>
  <view class="app-layout">
    <app-header title="会员等级规则" />
    <view class="app-main">
      <view class="form-container">
        <view class="class-form">
          <scroll-view scroll-y="true" style="height: 100%;">
            <u-form labelPosition="left" labelWidth="90px" :model="formData" ref="refFrom">
               <view class="tit">
                 等级规则说明
               </view>
              <view class="editor-box">
                <sp-editor :toolbar-config="{
                  excludeKeys: [
                    'direction',
                    'video',
                    'export',
                    'link',
                    'removeFormat',
                    'date',
                    'lineHeight',
                    'letterSpacing',
                    'listCheck',
                    'color',
                    'backgroundColor',
                    'image'
                  ],
                  iconSize: '18px',
                }" @init="initEditor" @input="inputOver" @upinImage="upinImage" @overMax="overMax" @addLink="addLink"
                  @exportHtml="exportHtml"></sp-editor>
              </view>

            </u-form>
          </scroll-view>
        </view>
        <view class="submit_btncon">
          <view style="display: flex; margin: auto">
            <button class="submit_close" @click="close">取消</button>
            <button class="submit_btn" @click="submit">确定</button>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>
<script setup>
  import {
    ref,
    computed
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const editorIns = ref(null)
  let formData = ref({})
  onLoad((e) => {

  })

  function inputOver(e) {
    // 可以在此处获取到编辑器已编辑的内容
    formData.value.description = e.html
    console.log( formData.value.description,' formData.value.description')
  }

  function overMax(e) {
    // 若设置了最大字数限制，可在此处触发超出限制的回调
    console.log('==== overMax :', e)
  }

  /** 编辑器就绪*/
  function initEditor(editor) {
    editorIns.value = editor
    preRender()
  }

  function preRender() {
    // 异步获取后端数据后，初始化编辑器内容
    editorIns.value.setContents({
      html: formData.value.description,
    })
  }

  function exportHtml(e) {
    uni.navigateTo({
      url: '/pages/out/out',
      success(res) {
        // 传至导出页面解析即可
        res.eventChannel.emit('e-transmit-html', {
          data: e,
        })
      },
    })
  }
  const submit = () => {
    console.log(formData.value.isActive)
    const valid = [{
        k: 'categoryName',
        err: '请输入分类名称',
      },
      {
        k: 'sortOrder',
        err: '请输入分类排序',
      },

    ]

    let err = ''
    if (!initialImages.value?.length) {
      err = '请上传分类图标'
    }
    for (let item of valid) {
      if (!formData.value[item.k] && formData.value[item.k] !== 0) {
        err = item.err
        break
      }
    }
    if (err) {
      uni.showToast({
        title: err,
        icon: 'none',
        duration: 2000,
      })
    } else {
      submitReq()
    }

  }
  const submitReq = async () => {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    })

    let postData = JSON.parse(JSON.stringify(formData.value))
    postData.sortOrder = Number(postData.sortOrder)
    postData.categoryIcon = initialImages.value
      .map((item) => {
        return item
      })
      .join(',')
    console.log(postData, 'postDatapostData')
    // const fn = formData.value.categoryId ? updateSassCategoryById : addSassCategory
    // try {
    //   const res = await fn(postData)
    //   console.log(res, 'resres')

    //   if (res) {
    //     uni.showToast({
    //       title: res.Result || "",
    //       icon: 'success',
    //     })
    //     setTimeout(() => {
    //       uni.navigateBack()
    //     }, 800)
    //   }
    //   uni.hideLoading()
    // } catch (error) {
    //   console.log(error)
    // }
  }
  const close = () => {
    uni.navigateBack()
  }
</script>
<style lang="scss" scoped>
  .form-container {
    width: 100%;
    background: #fff;
    margin: 10px 10px 0;
    display: flex;
    flex-direction: column;

    .class-form {
      flex: 1;
      overflow: hidden;
      .tit{
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        text-align: center;
        margin-bottom: 15px;
        margin-left:30px;
      }

      :deep(.u-form) {
        padding: 21px 97px 0;
        box-sizing: border-box;
      }

      .editor-box {
        border: 1px solid #e8e8e8;
        width: 100%;
        height: 400px;
      }

    }
  }
</style>
